{% extends 'layout.html' %}
{% load permission %}


{% block content %}
    <!-- 通过simple_tag判断权限 -->
    {% add_permission request 'policy_add' %}
    <!--
    <a href="{% url 'policy_add' %}" class="btn btn-primary">添加 <span class="glyphicon glyphicon-plus-sign"></span> </a>
    -->
    <hr>
    <div style="padding: 0 20px 0 20px">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <td>id</td>
                <td>count(个)</td>
                <td>price(元)</td>
                {% if request|table_permission:"policy_edit,policy_delete" %}
                    <td>operation</td>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% for foo in queryset %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ foo.count }}</td>
                    <td>{{ foo.price }}</td>
                    {% if request|table_permission:"policy_edit,policy_delete" %}
                        <td>
                            {% edit_permission request 'policy_edit' foo.id %}
                            {% delete_permission request 'policy_delete' nid=foo.id %}
                            <!--
                        <a href="{% url 'policy_edit' pk=foo.id %}" class="btn btn-info btn-sm">编辑</a>
                        <a class="btn btn-danger btn-sm deletePolicy" nid="{{ foo.id }}">删除</a>
                        -->
                            <span style="color:red"></span>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <!-- dialog控制边框大小.颜色.位置等样式 -->
        <div class="modal-dialog" role="document">
            <!-- 红色边框 -->
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>是否确定要删除?</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                    eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p>
                    <button type="button" class="btn btn-danger modalSend">确定</button>
                    <button type="button" class="btn btn-default modalCancel">取消</button>
                </p>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            NID = null
            // 点击显示警告框
            $('.deletePolicy').click(function () {
                NID = $(this).attr('nid')  // 获取当前删除的nid
                $('#deleteModal').modal('show')
            })
            // 点击取消隐藏警告框
            $('.modalCancel').click(function () {
                $('#deleteModal').modal('hide')
            })
            // 点击确定发送请求
            $(".modalSend").click(function () {
                modalSendAjax()
            })
        })

        function modalSendAjax() {
            $(".deleteCustomer").next().empty()
            $.ajax({
                url: "{% url 'policy_delete' %}",
                type: 'get',
                data: {'nid': NID},
                dataType: 'json',
                success: function (data) {
                    $('#deleteModal').modal('hide')
                    if (data.status) {
                        location.reload('{% url 'policy_list' %}')
                    } else {
                        console.log(2)
                        $("[nid=" + NID + "]").next().text(data.detail)  // 展示错误信息
                    }
                }
            })
        }
    </script>
{% endblock %}